<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="../../gun.js"></script>
	</head>
	<body>
		<h3>Admin JSON Editor</h3>
		This is a live view of your data, you can edit it in realtime or add new field/values.
		<ul id="data">
		</ul>
		<li id="model">
			<b>field</b>:
			<span contenteditable="true">val</span>
		</li>
		<ul><li>
			<form id="form">
				<label>
					<input id="field" placeholder="field">
					<button type="submit">add</button>
				</label>
			</form>
		</li></ul>
		<script> // minimal jQuery polyfill
			var $ = function(s, e){ return (e || document).querySelector(s) }
			function clean(text){ return String(text).replace(/\</ig, '&lt;') }
		</script>
		<script>
			var gun = Gun(location.origin + '/gun');
			var ref = gun.get('example/json/data');
			$('#form').onsubmit = function(e){
				return ref.path( clean($('#field').value) ).put("value"), false; // add a new field, and cancel the form submit.
			}
			document.onkeyup = function(e){
				if(!e || !e.target){ return } // ignore if no element!
				if(!e.target.attributes.contenteditable){ return } // ignore if element content isn't editable!
				console.log("save to", e.target.previousElementSibling.innerHTML, ":", e.target.innerHTML);
				ref.path(clean(e.target.previousElementSibling.innerHTML)) // grab the label, which is in the previous element.
				   .put( clean(e.target.innerHTML) ); // insert the value of the text in the current element.
			}
			ref.on(function(json){
				var data = Gun.obj.copy(json); // make a snapshot!
				delete data._; // skip meta data!
				for(var field in data){
					var val = String(data[field]), id = field.replace(/[^A-z]/ig, ''), elem; // make data safe.
					(elem = $('#' + id) || $('#data').appendChild($('#model').cloneNode(true))).id = id; // reuse or make element, set id.
					$('b', elem).innerHTML = clean(field); // escape and display field
					$('span', elem).innerHTML = clean(val); // escape and display value
				}
			});
		</script>
		<style>
			html, body {
				font-family: Verdana, Geneva, sans-serif;
			}
			a, button {
				border: none;
				color: skyblue;
				background: transparent;
				text-decoration: none;
				cursor: poiner;
			}
			ul, li {
				list-style-type: none;
			}
			ul:hover, li:hover {
				list-style-type: inherit;
			}
			input {
				border: none;
				border-bottom: dashed 1px gainsboro;
			}
			.none, #model {
				display: none;
			}
		</style>
	</body>
</html>
